<template>
	<view class="contain">
		<view class="item">
			<u-avatar shape="square" :src="info.student.avatar"></u-avatar>
			<view class="text">
				{{info.student.name}}
			</view>
			<view class="text" v-if="info.score">
				{{info.score}}&emsp;&emsp;绩点:{{info.gpa}}
			</view>
			<view class="text" v-else>
				未录入
			</view>
		</view>

		<view class="content">
			评语：{{info.comment}}
		</view>
		<u-gap height="20" bgColor="#fff"></u-gap>


		
		<view class="btn" v-if="!complete">
			<view class="" v-if="show">
				<u--input placeholder="请填写成绩" border="surround" v-model="score"></u--input>
			</view>
			<view class="comment">
				<u--textarea v-if="show" v-model="comment" placeholder="请输入评语"></u--textarea>
			</view>

			<view class="smailBtn" v-if="show">
				<u-button type="primary" text="提交" @click="submit"></u-button>

			</view>

			<u-button type="primary" text="修改" v-if="info.score" @click="show= true"></u-button>
			<u-button type="primary" text="录入" v-else @click="show= true"></u-button>


		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js'; // 引入api
	export default {
		data() {
			return {
				complete: "",
				selectId: -1,
				studentId: -1,
				info: {

				},
				score: 0,
				show: false,
				comment: ""
			};
		},
		onLoad(options) {
			console.log(options)
			this.selectId = options['selectId'];
			this.studentId = options['studentId'];


			let token = uni.getStorageSync("token");
			api.getStudentScoreByTeacher(token, this.selectId, this.studentId).then((res) => {
				if (res.code === 1) {
					this.info = res.data[0]
					console.log(this.info)

					if (this.info.score) {
						this.score = this.info.score
					}
				} else if (res.code === 0) {
					uni.showModal({
						content: res.errors
					})
				}

			}).catch(() => {
				uni.showModal({
					content: "异常",
					showCancel: false,
					success() {
						uni.navigateBack({

						})
					}
				})
			})
			if (options['complete'] == "true") {
				this.complete = true;
			} else {
				this.complete = false;
			}


		},
		methods: {
			submit() {
				// this.info.score = this.score

				let token = uni.getStorageSync("token")
				let data = {
					student: this.info.student.id,
					select: this.info.select.id,
					score: this.score,
					gpa: ((parseFloat(this.score) / 10) - 5),
					credit: this.info.credit,
					comment: this.comment,
					valid: true
				}
				uni.request({
					url: `http://127.0.0.1:8000/onlyScore/${this.info.id}/`,
					data: data,
					method: "PUT",
					header: {
						'Authorization': 'JWT ' + token // 参数
					},
					success: (res) => {
						if (res.data.code == 1) {
							this.show = false
							console.log(res.data.data)
							this.info.score = res.data.data.score
							this.info.gpa = res.data.data.gpa
							this.info.comment = res.data.data.comment
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.contain {
		display: flex;
		align-items: center;
		flex-direction: column;

		.item {
			width: 90%;
			height: 70px;
			line-height: 70px;
			font-size: 35rpx;
			border-bottom: #D8D8D8 1rpx solid;
			display: flex;
			flex-direction: row;
			align-items: center;

			.text {
				margin-left: 40rpx;
				width: 300rpx;
			}
		}

		.content {
			margin-top: 20px;
			width: 80%;
			padding: 20px;
			border: #000000 1px solid;
			border-radius: 10px;
		}

		.btn {
			width: 90%;
			display: flex;
			flex-direction: column;
			// flex-wrap: wrap;

			align-items: center;

			.comment {
				width: 100%;
				margin: 20px 0;
			}

			.smailBtn {
				width: 20%;
				margin: 20px 0;
			}
		}
	}
</style>
